<template>
	<div class="CTrendImages">
		<div 
			v-for="(item, index) in data"
			v-bind:class="{'img-item-one': data.length == 1, 'img-item' : data.length > 1}"
			v-bind:style="{'background-image':'url(' + item.url + ')', 
			'width': data.length == 1? item.width/10 + 'px': '100px', 'height': data.length == 1? item.height/10 + 'px':'100px'}">
			{{item.width}}
			{{item.height}}
		</div>
	</div>
</template>

<script>
	export default {
		name: 'CTrendImages',
		data() {
			return {

			}
		},
		methods: {},
		props: ['data']
	}
</script>

<style scoped>
	.CTrendImages {
		display: flex;
		display: -webkit-flex;
		display: -moz-flex;
		flex-wrap: wrap;
	}
	
	.img-item {
		width: 100px;
		height: 100px;
		background-size: cover;
		margin-right: 15px;
		cursor: pointer;
	}
	
	.img-item-one {
		background-size:100% 100%;
		margin-right: 15px;
		cursor: pointer;
	}
</style>